<template>
  <a-form
    ref="ruleForm"
    :selfUpdate="true"
    :model="geometric"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    layout="inline">
    <div class="geometric-form">
      <a-form-item
        label="x坐标"
        prop="left"
        :colon="false"
        class="value">
        <a-input-number v-model="selectedComponent.style.left" />
      </a-form-item>
      <a-form-item
        label="单位"
        prop="leftUnit"
        :colon="false"
        class="unit">
        <a-select v-model="selectedComponent.style.leftUnit">
          <a-select-option v-for="option in unitOptions" :key="option.value">
            {{ option.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="y坐标"
        prop="top"
        :colon="false"
        class="value">
        <a-input-number v-model="selectedComponent.style.top" />
      </a-form-item>
      <a-form-item
        label="单位"
        prop="topUnit"
        :colon="false"
        class="unit">
        <a-select v-model="selectedComponent.style.topUnit">
          <a-select-option v-for="option in unitOptions" :key="option.value">
            {{ option.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="宽度"
        prop="width"
        :colon="false"
        class="value">
        <a-input-number v-model="selectedComponent.style.width" />
      </a-form-item>
      <a-form-item
        label="单位"
        prop="widthUnit"
        :colon="false"
        class="unit">
        <a-select v-model="selectedComponent.style.widthUnit">
          <a-select-option v-for="option in unitOptions" :key="option.value">
            {{ option.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="高度"
        prop="height"
        :colon="false"
        class="value">
        <a-input-number v-model="selectedComponent.style.height" />
      </a-form-item>
      <a-form-item
        label="单位"
        prop="heightUnit"
        :colon="false"
        class="unit">
        <a-select v-model="selectedComponent.style.heightUnit">
          <a-select-option v-for="option in unitOptions" :key="option.value">
            {{ option.label }}
          </a-select-option>
        </a-select>
      </a-form-item>

    </div>
  </a-form>

</template>

<script >
import { mapState } from "vuex"
import { unitOptions } from "../../../../lib/const"

export default {
  data () {
    return {
      unitOptions,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    }
  },

  methods: {

  },
  computed: {
    ...mapState('lowCode', {
      selectedComponent: state => state.selectedComponent,
    }),

  },
  mounted () {

  },
  created () {

  }
}
</script>

<style lang="less" scoped>
  @import url(./index.less);
</style>
